<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <!-- <el-form-item label="统计月份数" prop="ffsq">
        <el-radio-group v-model="ffsq" @change="handlePrintList">
          <el-radio :label="6">6个月</el-radio>
          <el-radio :label="12">12个月</el-radio>
          <el-radio :label="18">18个月</el-radio>
          <el-radio :label="24">24个月</el-radio>
          <el-radio :label="36">36个月</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="统计年月" prop="ffsq">
        <el-date-picker v-model="ffsq" @change="handlePrintList" type="monthrange" align="right" value-format="yyyy-MM" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions" :default-value="defalutMonth"> </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="PrintTable" id="jsds">
      <h1>{{ beginMonth }}月-{{ endMonth }}月政务服务热线地市月份统计表</h1>
      <table id="myTable" style="width: auto; overflow-x: auto">
        <tr style="text-align: center; font-weight: bold !important; font-size: 12px !important; height: 35px !important">
          <td v-for="header in secRowData" :key="header.keys" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
            {{ header.texts }}
          </td>
        </tr>
        <tr v-for="(info, index) in tableList" :key="index" style="text-align: center; height: 20px !important; font-size: 12px !important">
          <td v-for="(header, idx) in info.tableColList" :key="idx" :rowspan="header.rowspan" :colspan="header.colspan" :style="header.styles">
            {{ header.texts }}
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { treeselect } from "@/api/hades/category/category";
import { totalcitymonthlist } from "@/api/hades/homepage/homepage";
export default {
  components: {},
  data() {
    return {
      loading: false,
      // 查询参数
      queryParams: {},
      ffsq: null,
      beginMonth: "",
      endMonth: "",
      //第一行列名
      secRowData: [],
      //分类数据
      categoryOptions: [],
      //统计数据
      tableList: [],
      // 三访*********
      tableList2: [],
      // 有理访无理访表头 背影色
      youlistyle: "width:120px;background-color: #fbe2bc;",
      // 内容数据大于0 样式
      dentdataGtStyle: "font-size:14px;",
      dydataGtStyle: "font-weight:bold;font-size:16px;color:red",
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  created() {
    this.init();
    this.handlePrintList();
  },
  methods: {
    init() {
      const now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let m = month < 10 ? "0" + month : month;
      let endMonth = `${year}-${m}`;
      let beginMonth = `${year}-01`;

      this.beginMonth = beginMonth;
      this.endMonth = endMonth;
      this.ffsq = [beginMonth, endMonth];
    },
    /*
     * 查询初访数据
     */
    handlePrintList() {
      if (null == this.ffsq || "" == this.ffsq) {
        this.$modal.msgError("请选择属期");
        return;
      }
      // let params = {
      //   monthNum: this.ffsq,
      // };
      let params = {
        beginDate: this.ffsq[0],
        endDate: this.ffsq[1],
      };

      this.beginMonth = params.beginDate;
      this.endMonth = params.endDate;
      this.tableList = [];
      this.secRowData = [];
      totalcitymonthlist(params).then((res) => {
        res.data.forEach((m, mIndex) => {
          //初始化表头
          if (mIndex == 0) {
            this.secRowData.push({ keys: "xh", texts: "序号", rowspan: "1", colspan: "1", styles: "width:50px;background-color: #fbe2bc;" });
            this.secRowData.push({ keys: "city", texts: "月份", rowspan: "1", colspan: "1", styles: "width:150px;background-color: #fbe2bc;" });
            //初始化第二行列名
            m.deptList.forEach((sub, idx) => {
              let arr = {
                keys: "city-" + sub.deptId,
                texts: sub.deptName,
                rowspan: "1",
                colspan: "1",
                styles: this.youlistyle,
              };
              this.secRowData.push(arr);
            });
          }
          let col = [];
          col.push({ keys: "am" + m.billMonth + "-" + m.deptId, texts: mIndex + 1, rowspan: "1", colspan: "1" });
          col.push({ keys: "bm" + m.billMonth + "-" + m.deptId, texts: m.billMonth, rowspan: "1", colspan: "1", styles: "width:200px;font-weight:bold;font-size:12px;" });
          m.categoryList.forEach((sub, idx) => {
            let styles = this.dentdataGtStyle;
            if (sub > 0) {
              styles = this.dydataGtStyle;
            }
            col.push({ keys: "subtype" + idx, texts: sub, rowspan: "1", colspan: "1", styles: styles });
          });
          let rows = {
            tableColList: col,
          };
          this.tableList.push(rows);
        });
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.ffsq = 12;
      this.handlePrintList();
    },
  },
};
</script>
<style scoped>
table,
th,
td {
  border: 1px solid #999999;
}
</style>
